<script setup>

import {goService} from "../../tools/go";
const listd = [
  {id:1,name:'chen',img:"src/static/img/indeximg/kjfs/用户头像.png",num:"3333票"},
  {id:2,name:'cn',img:"src/static/img/indeximg/kjfs/用户头像.png",num:"3票"},
  {id:3,name:'en',img:"src/static/img/indeximg/kjfs/用户头像.png",num:"333票"},
  {id:4,name:'n',img:"src/static/img/indeximg/kjfs/用户头像.png",num:"133票"},
  {id:4,name:'n',img:"src/static/img/indeximg/kjfs/用户头像.png",num:"133票"},
  {id:4,name:'n',img:"src/static/img/indeximg/kjfs/用户头像.png",num:"133票"},
  {id:4,name:'n',img:"src/static/img/indeximg/kjfs/用户头像.png",num:"133票"},
]
</script>

<template>
  <view class="back">
    <view class="titli">
        <v-icon @click="goService()" class="icon" icon="mdi-chevron-left"></v-icon>
        <h3>选举投票</h3>
      </view>
  </view>
<!-- 列表1 -->
  <view class="list w">
      <view class="one">
        <text class="tx">19天10:10:10 后结算</text>
        <view>
          <text>剩余投票次数:</text>
          <p>3次</p>
        </view>
      </view>
    <!-- 二 -->
    <ul class="nav">
      <li v-for="(item,index) in listd" :key="index">
        <div class="container" style="position: relative;">
          <div class="circle">
            <img :src="item.img" alt="">
          </div>
          <div class="triangle">
            <span>{{ item.id }}</span>
          </div>
          <div class="text">{{ item.name }}</div>
          <div class="text" style="font-size: 18px; color: #333;">{{ item.num }}</div>
          <button class="button">详情</button>
        </div>
      </li>
    </ul>
  </view>
</template>

<style scoped lang="scss">
@use "../../static/css/main";
@import "../../static/css/title/index.css";
    .list {
      //nav
      .nav {
        li {
          .button {
            width: 150px;
            height: 50px;
            line-height: 50px;
            background-color: orange;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
          }
          .text {

          }
          .container {
            .triangle {
               span {
                font-size: 24px;
                color: white;
                position: relative;
                bottom: -85px;
                left: -16px;
                top: 57px;
                transform: rotate(90deg);
              }

              position: absolute;
              top: 0px;
              right: 0px;
              width: 0px;
              height: 0;
              transform: rotate(-90deg);
              border-left: 57px solid transparent;
              border-right: 0px solid transparent;
              border-bottom: 57px solid lightcoral;
              display: flex;
              justify-content: center;
              align-items: flex-end;
            }

            .circle {
              img{
                width: 100%;
                height: 100%;
                border-radius: 111px;
              }
              width: 100px;
              height: 100px;
              border-radius: 50%;
              background: lightblue;
              margin: 0 auto 10px;
            }
            text-align: center;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 12px;
          }
          width: 100%;
          height: 32vh;
        }
        margin-top: 10px;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
      }
    }
      //一
      .one {
        view {
          p {
            display: block;
            width: 35px;
            text-align: center;
            line-height: 20px;
            height: 20px;
            font-size: 12px;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
            color: #e0e0e0;
          }

          display: flex;
          align-items: center;
          color: #e0e0e0;
        }

        .tx {
          font-size: 15px;
          font-weight: 500;
          color: red;
        }

        display: flex;
        align-content: center;
        justify-content: space-between;
        background: #ffff;
      }

      body {
        background: #ffffff;
      }
body::-webkit-scrollbar{
  display: none;
}
      .titli {
        background: #ffffff;
      }




</style>













